<template>
  <div id="footer">
    <div class="container">
      <div class="footer-container">
        <div class="col" v-for="(colitem,colindex) in ContentData.footerContent" :key="colindex">
          <p class="s-title">{{colitem.stitle}}</p>
          <ul>
            <li v-for="(item,index) in colitem.content" :key="index">
              <a :href="item.src" target="_blank" rel="noopener noreferrer">{{item.text}}</a>
            </li>
          </ul>
        </div>
        <!-- <div class="col">
          <div class="ewm-container">
            <p class="s-title">同福客户端</p>
            <ul>
              <li>
                <img src="@/assets/images/foot/20101209435723_300x300_1190.png" alt="同福音乐" />
                <p>同福音乐</p>
              </li>
              <li>
                <img src="@/assets/images/foot/201012094413724_300x300_8080.jpg" alt="同福视频" />
                <p>同福音乐</p>
              </li>
            </ul>
          </div>
        </div> -->
      </div>
      <div class="footer">
        <div class="focus-way"></div>
        <div class="copyright">
          <ul>
            <li v-for="(item,index) of ContentData.copyright" :key="index">
              <a :href="item.src">{{item.text}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ContentData from "@/configs/foot/footer-content.js"
export default {
    name:"Footer",
    setup(){
        return{
            ContentData
        }
    }
}
</script>

<style lang="scss" scoped>
#footer {
  margin-top: 100px;
  width: 100%;
  padding: 50px 0;
  background-color: #f3f3f3;
  a,p,.s-title {
    font-size: 12px;
  }
  .footer-container {
    border-bottom: 1px solid #e0e0e0;
    overflow: hidden;
    .col {
      float: left;
      width: 25%;
      .s-title {
        font-weight: 400;
        margin-bottom: 30px;
        color: #000;
      }

      ul {
        li {
          margin-bottom: 20px;
          a {
            color: #666;
            &:hover {
                color: $ThemeColor;
            }
          }
        }
      }
      .ewm-container {
        float: right;
        width: 240px;
        li {
          float: left;
          &:first-child {
            margin-right: 40px;
          }

          img {
            width: 100px;
            height: 100px;
            margin-bottom: 20px;
            display: block;
          }

          p {
            text-align: center;
          }
        }
      }
    }
  }
  .footer {
    .focus-way {
      padding: 20px 0;
    }
    .copyright {
      li {
        float: left;
        margin-right: 10px;
        &:last-child {
          float: right;
          margin-right: 0;
        }
        a {
          color: #666;
        }
      }
    }
  }
}
</style>